<template>
  <div class="row">
    <div class="col-xs-12">
      <!--
      <Portlet title="产品信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="120">产品编号：</td>
            <td width="19%">{{headerDetail.productNo}}</td>
            <td width="120">产品名称:</td>
            <td width="19%">{{headerDetail.productName}}</td>
            <td width="120">颜色:</td>
            <td width="19%">{{headerDetail.color}}</td>
            <td width="120">规格:</td>
            <td width="19%">{{headerDetail.standard}}</td>
          </tr>
          <tr>
            <td>风格：</td>
            <td>{{headerDetail.style}}</td>
            <td>计数单位:</td>
            <td>{{headerDetail.productUnit}}</td>
            <td>实际产品数量:</td>
            <td>{{headerDetail.libraryNum}}</td>
            <td>可用产品数量:</td>
            <td>{{headerDetail.availableNum}}</td>
          </tr>
          <tr>
            <td>材料类型：</td>
            <td>{{headerDetail.storageType | filterDataBaseDictionary}}</td>
            <td>自定义属性:</td>
            <td>{{headerDetail.customProperty}}</td>
            <td>总体积:</td>
            <td>{{headerDetail.libraryVolume}} m³</td>
            <td></td>
            <td></td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      -->
      <!--
      <Portlet title="包件列表">
        <el-table
          :data="getDataTable"
          border
          max-height="500"
          class="text-center"
        >
          <el-table-column
            prop="code"
            label="包件编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="包件名称">
          </el-table-column>
          <el-table-column
            prop="standard"
            label="规格">
          </el-table-column>
          <el-table-column
            prop="color"
            label="颜色">
          </el-table-column>
          <el-table-column
            prop="style"
            label="风格">
          </el-table-column>
          <el-table-column
            prop="customProperty"
            label="自定义属性">
            <template slot-scope="scope">
              <Truncate :value="scope.row.customProperty" :maxLength="40"></Truncate>
            </template>
          </el-table-column>
          <el-table-column
            prop="libraryVolume"
            label="总体积(m³)">
            <template slot-scope="scope">
              {{ scope.row.libraryVolume | decimalNumFilter}}
            </template>
          </el-table-column>
          <el-table-column
            prop="libraryPackageNum"
            label="在库包件数量">
            <template slot-scope="scope">
              <span>{{scope.row.libraryPackageNum}} {{ scope.row.unit }}</span>
            </template>
          </el-table-column>
          <slot></slot>
        </el-table>
      </Portlet>
      -->
      <Portlet title="商家信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="160">商家名称:</td>
            <td colspan="7">{{cargoOwnerInfo.cargoOwnerName}}</td>
          </tr>
          <tr>
            <td width="160">商家联系人:</td>
            <td width="20%">{{cargoOwnerInfo.cargoOwnerPrin}}</td>
            <td width="160">联系电话:</td>
            <td width="20%">{{cargoOwnerInfo.cargoOwnerPhone}}</td>
            <td width="160">实际包件库存:</td>
            <td width="20%">{{cargoOwnerInfo.libraryPackageNum}}</td>
          </tr>
          <tr>
            <td width="140">开通人:</td>
            <td width="20%">{{cargoOwnerInfo.founderName}}</td>
            <td width="120">开通日期:</td>
            <td width="20%">{{cargoOwnerInfo.foundtime | unixTimestampFilter}}</td>
            <td width="120">总体积:</td>
            <td width="20%">{{cargoOwnerInfo.libraryPackageVolume}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <datas-table-basic
        ref="dataTable"
        url="/ms-warehouse-order/longOwner/findCargoRuningList"
        :columns="columns"
        :initParams="{
          cargoOwnerId: this.id
        }"
        :fixedColumns="{
            leftColumns: 2,
            rightColumns: 0
          }"
      >
        <span slot="title"> </span>
        <div slot="search">
          <el-form ref="searchForm" class="el-form-col" :model="search" label-width="106px" label-position="left">
            <div class="row all-search-textaea">
              <div class="col-xs-3 col-sm-3" v-if="!searchOpen">
                <el-form-item label="包件编号：" prop="code">
                  <el-input v-model="search.code"></el-input>
                </el-form-item>
              </div>
              <div style="position: absolute" class="col-xs-3 col-sm-3" v-if="searchOpen" >
                <el-form-item label="包件编号：" prop="code">
                  <el-input type="textarea" :rows="8" v-model="search.code"></el-input>
                </el-form-item>
              </div>
              <div class="col-xs-3 col-sm-3" :class="{'col-xs-offset-3': searchOpen}" >
                <el-form-item label="包件名称:" prop="name">
                  <el-input v-model="search.name"></el-input>
                </el-form-item>
              </div>
              <div class="col-xs-3 col-sm-3">
                <el-form-item label="所属产品:" prop="productName">
                  <el-input v-model="search.productName"></el-input>
                </el-form-item>
              </div>
              <div class="col-xs-1 col-sm-1">
                <button class="btn btn-block btn-circle green btn-boxShow ladda-button"
                        data-style="zoom-out" @click.prevent="searchFunc(search)">查询</button>
              </div>
              <div class="col-xs-1 col-sm-1">
                <button class="btn btn-block btn-circle default btn-boxShow" @click.prevent="reset('searchForm')">重置</button>
              </div>
              <div class="col-xs-1 col-sm-1">
                <button
                  class="btn btn-block btn-circle white font-green btn-boxShow"
                  @click.prevent="searchOpen = !searchOpen">
                  {{ searchOpen ? '收起' : '高级搜索' }}
                </button>
              </div>
            </div>
            <template v-if="searchOpen">
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-xs-offset-3">
                  <el-form-item label="操作人:" prop="confirmName">
                    <el-input v-model="search.confirmName"></el-input>
                  </el-form-item>
                </div>
                <div class="col-xs-3 col-sm-3 ">
                  <el-form-item label="操作时间:" prop="confirmStartTime">
                    <el-date-picker type="date"
                                    placeholder="操作开始时间"
                                    v-model="search.confirmStartTime"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div>
                <div class="col-xs-3 col-sm-3">
                  <el-form-item label="至" prop="confirmEndTime">
                    <el-date-picker type="date"
                                    placeholder="操作结束时间"
                                    v-model="search.confirmEndTime"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-xs-offset-3">
                  <el-form-item label="库位:" prop="location">
                    <el-input v-model="search.location"></el-input>
                  </el-form-item>
                </div>
              </div>
            </template>
          </el-form>
          <div class="clearfix"></div>
        </div>
      </datas-table-basic>
    </div>
  </div>
</template>
<script>
import Portlet from '@/components/base/Portlet'
import PackageTable from '@/components/businessBase/PackageTable'
import {httpGetResponse, httpGetTable} from '@/service/dataService'
import {filterDataBaseDictionary, decimalNumFilter, unixTimestampFilter} from '@/assets/scripts/base/filters'
import Truncate from '@/components/base/Truncate'
import DatasTableBasic from '@/components/base/DatasTableBasic'
import {copy} from '@/assets/scripts/base/functions'
export default {
  name: 'WarehousingShow',
  components: {
    Portlet,
    PackageTable,
    Truncate,
    DatasTableBasic
  },
  filters: {
    filterDataBaseDictionary,
    decimalNumFilter,
    unixTimestampFilter
  },
  data() {
    return {
      id: this.$route.params.id,
      ownerId: this.$route.params.ownerId,
      headerDetail: {},
      getDataTable: [],
      chOrderService: {},
      cargoOwnerInfo: {},
      search: {
        productNo: '',
        productName: '',
        manufacturersName: '',
        code: '',
        name: '',
        confirmName: '',
        location: '',
        confirmStartTime: '',
        confirmEndTime: ''
      },
      searchOpen: false,
      model: {
      },
      columns: [
        {
          title: '包件编号',
          data: 'code',
          render(data, type, full, meta) {
            return `<a class="actions-0" href="javascript:;">${data}</a>`
          },
          actions: [
            {
              el: '.actions-0',
              callback: (data) => {
              }
            }
          ]
        },
        {title: '包件名称', data: 'name'},
        {title: '入库数量', data: 'storageNum'},
        {title: '出库数量', data: 'outNum'},
        {title: '关联单号', data: 'orderNo'},
        {title: '库位', data: 'location'},
        {
          title: '操作人',
          data: 'founderName'
        },
        {
          title: '操作日期',
          data: 'foundtime',
          render(data, type, full, meta) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  created() {
    // this.getHeader()
    // this.getDetail()
    this.getCargoOwnerDetail()
  },
  computed: {},
  methods: {
    getHeader() {
      httpGetResponse('/ms-warehouse-order/longOwner/findLongtimeProductInfo', {
        productId: this.id,
        ownerId: this.ownerId
      }).then(response => {
        if (!response.data) {
          return
        }
        this.headerDetail = response.data || {}
      })
    },
    getDetail() {
      httpGetTable('/ms-warehouse-order/longOwner/findProductPackageList', {cargoOwnerId: this.ownerId}).then(response => {
        if (!response.data) {
          return
        }
        this.getDataTable = response.data || []
      })
    },
    searchFunc(search) {
      let data = copy(search, true)
      this.$refs.dataTable.search(data)
    },
    // reset 重置搜索框
    reset() {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
      }
    },
    refresh() {
      if (this.$refs.dataTable) {
        this.$refs.dataTable.draw()
      }
    },
    // 获取详情
    getCargoOwnerDetail() {
      httpGetResponse('/ms-warehouse-order/longOwner/findLongtimeOwnerInfo', {cargoOwnerId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.cargoOwnerInfo = response.data || {}
      })
    }
  }
}
</script>
